<template>
    <Teleport to="body" :disabled="!appendToBody">
       <!-- <Transition name="bounce">
        <p v-if="visible" style="text-align: center;">
          Hello here is some bouncy text!
          <span @click="execClose">关闭</span>
        </p>
    </Transition> -->
     <div v-if="!destroyOnClose|| visible" v-show="visible" class="dialog-root">
      <!-- van-fade
          weui-fade
      -->
       <Transition name="weui-fade">
         <div class="dialog-mask" v-if="mask" v-show="visible" @click="handleMaskClick"></div>
        </Transition>
        <div class="dialog-wrapper">
          <!-- 
            van-dialog
            weui-dialog
           -->
            <Transition name="weui-dialog"> 
              <div class="dialog dialog-center" :style="style" v-show="visible">
            <div class="dialog-header dialog-header-line" v-if="title || $slots.title">
              <div :class="[
                'dialog-title',
                `dialog-title-${titleAlign}`
              ]">
                <slot name="title">{{title}}</slot>
              </div>
            </div>
            <button class="dialog-close" v-if="showClose" @click="execClose">
              <span class="close-x">
                <a-icon name="close"  ></a-icon>
              </span>
            </button>
            <div class="dialog-body">
              <div class="dialog-body-text" v-if="content">{{content}}</div>
              <slot v-else></slot>
            </div>
            <div  :class="[
              'dialog-footer',
              `dialog-footer-${footerButtonAlign}`,
              {'dialog-footer--top-line':showFooterLine}
            ]" v-if="showFooter">
              <a-button @click="onCancel" plain >{{cancelText}}</a-button>
              <a-button @click="onConfirm"  >{{okText}}</a-button>
            </div>
                </div>
            </Transition> 
    </div>
  </div>  
  </Teleport>
</template>
<script lang="ts">
import AButton from '@/components/button'
import AIcon from '@/components/icon'

</script>

<script setup lang="ts">
import { watchEffect, ref, UnwrapRef,computed,onMounted } from 'vue'
import { dialogEmits, dialogProps } from './dialog'

defineOptions({
    name:'a-dialog'
})
const props = defineProps(dialogProps)


const emit = defineEmits(dialogEmits)
const { visible,mask,maskClosable, destroyOnClose } = toRefs(props)


const style = computed(() => {
    let width = typeof props.width === 'number' ? `${props.width}px` : props.width
    let height = typeof props.height === 'number' ? `${props.height}px` : props.height
    let maxHeight=typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight
    return {
        ...{ width,height,maxHeight }
    }
})
watch(visible, (val) => {
    console.log(val,val?'打开':'关闭')
})

const isMounted = ref(false)
  onMounted(() => {
    isMounted.value = true
  })
   onBeforeUnmount(() => {
    isMounted.value = false
   })
watchEffect(() => {
    if (isMounted.value) {
      if (visible.value) {
        document.addEventListener('keyup', listenKeyUp)
      } else {
        document.removeEventListener('keyup', listenKeyUp)
      }
    }
  })
// 监听键盘事件
const listenKeyUp = (e: KeyboardEvent) => {
  const hideModal = () => {
    console.log(e)
    if (e.getModifierState('Alt')) { 
      console.log('按下了 Alt 键')
      return
    }
    /*if (e.code === 'Escape') {
      console.log('按下了 ESC 键')
      onCancel()
    }*/
  }

  setTimeout(hideModal)
}
 


const closeDialog = () => {
    emit('update:visible', false)
    emit('on-close')
}
const handleMaskClick = () => { 
    maskClosable && execClose()
}
const onCancel = () => { 
    props.onCancel&& props.onCancel() 
    emit('on-cancel')
    execClose()
}
const onConfirm = () => { 
    props.onConfirm&& props.onConfirm()
    emit('on-confirm')
    execClose()
}
const execClose = () => { 
    props.beforeClose ? props.beforeClose(closeDialog) : closeDialog()
}
</script>
<style lang="scss">


.dialog--wipe{
  &-enter-active,
  &-leave-active {
    transition: all 3s ease;
  }

  &-enter-active,
  &-leave{
    background-color: red !important;
    // background-color: red;
    // transform: translateY(0);
    // transform: translateY(-50%);
    // opacity: 1;
  }
  &-enter,
  &-leave-active {
    // transform: translateY(9.74rem);
    // top: calc(50% - 24px);
    // opacity: 0;
  }
  /*&-enter-active {
    transition: opacity 1s cubic-bezier(0.16, 0.75, 0.5, 1), top 1s cubic-bezier(0, 0, 1, 1);
  }

  &-leave-active {
    transition: opacity 1s cubic-bezier(0.5, 0, 0.84, 0.25), top 1s cubic-bezier(0, 0, 1, 1);
  }

  &-enter-from,
  &-leave-to {
    opacity: 0.2;
    top: calc(50% - 24px);
  }*/
}

</style>